<template>
  <div class="login">
    <div ref="bodyAnimation" class="lottie" id="lottie"></div>
    <div class="userinput">
      <p>博客管理系统</p>
      <h2>帐号</h2>
      <vs-input
        size="24"
        block
        shadow
        v-model="username"
        placeholder="请输入管理员账户"
      >
        <template #icon>
          <i class="el-icon-user"></i>
        </template>
      </vs-input>
      <h2>密 码</h2>
      <vs-input
        size="lx"
        block
        shadow
        v-model="password"
        @keyup.enter.native="loginhome"
        placeholder="请输入密码"
      >
        <template #icon>
          <i class="el-icon-lock"></i>
        </template>
      </vs-input>

      <div class="buttons">
        <vs-button block @click="loginhome"> 登录 </vs-button>
        <vs-button block flat @click="reset"> 重置 </vs-button>
      </div>
    </div>
  </div>
</template>

<script>
import { userlistAPI, userLoginAPI } from "../api/index"
import lottie from 'lottie-web'
import lottieMain from '../assets/login.json'
export default {
  data () {
    return {
      username: "",
      password: "",
      loginarr: [],
    }
  },
  methods: {
    init () {
      const animation = lottie.loadAnimation({
        container: this.$refs.bodyAnimation,
        renderer: 'svg',// 渲染方式：svg、canvas
        loop: true,  // 循环播放，默认：false
        autoplay: true, //自动播放 ，默认：true
        animationData: lottieMain
        //  path: '../assets/login.json'  // json 路径
      })
      animation.play()
    },
    async getuserinfo () {
      var res = await userlistAPI()
      this.loginarr = res.data.data
      console.log(this.loginarr)
    },
    reset () {
      (this.username = ""), (this.password = "")
    },
    async loginhome () {
      var res = await userLoginAPI(this.username, this.password)
      console.log(res.data.data)
      // if(res.data.data)
      if (res.data.data.status) {
        localStorage.username = this.username
        localStorage.password = this.password
        this.$router.replace("/home")
        this.$message({
          //   showClose: true,
          message: "登陆成功",
          type: "success",
          center: true,
        })
      } else {
        // this.$router.replace("/login");
        if (res.data.data.code == -1) {
          this.$message({
            //   showClose: true,
            message: "该用户不存在，请联系管理员添加",
            type: "error",
            center: true,
          })
          return
        }
        this.$message({
          //   showClose: true,
          message: "密码错误，请联系管理员修改",
          type: "error",
          center: true,
        })
        return
      }
    },
  },
  mounted () {
    // this.getuserinfo();
    this.init()
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: space-around;
  .lottie {
    width: 45%;
  }
  .userinput {
    width: 25%;
    height: 30vh;
    padding: 96px;
    border-radius: 24px;
    flex-direction: column;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
      rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    transition: 0.2s linear;
    p {
      // color: rgb(121, 196, 225);
      font-size: 48px;
      margin:  0;
      margin-bottom:32px;
    }
    .buttons {
      margin: 40px 0;
    }
  }
}
</style>